<template>
  <view class="container">
    <u-navbar
      autoback
      placeholder
      title="申请中心"
      bgColor="transparent"
    ></u-navbar>
    <view class="header">
      <!--      <image class="avatar" :src="memberInfo.avatar" mode="aspectFill"></image>-->
      <u-avatar size="140rpx"></u-avatar>
      <text class="nickname mt-8">{{ memberInfo.nickname }}</text>
      <text class="member-id">会员ID: {{ memberInfo.memberId }}</text>
    </view>

    <view class="application-options">
      <view class="option-card" @click="applyForLeader">
        <view class="option-icon">👑</view>
        <view class="option-title">申请成为团长</view>
        <view class="option-description">管理团队，获得更多收益</view>
      </view>

      <view class="option-card" @click="applyForMerchant">
        <view class="option-icon">🏪</view>
        <view class="option-title">申请成为商户</view>
        <view class="option-description">开展业务，拓展市场</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      memberInfo: {
        avatar: "/static/default-avatar.png",
        nickname: "张三",
        memberId: "M123456",
      },
    };
  },
  methods: {
    // 申请成为团长
    applyForLeader() {
      this.$Router.push({ name: "applyForLeader" });
    },
    applyForMerchant() {
      this.$Router.push({ name: "applyForMerchant" });
    },
    openShop() {},
  },
};
</script>
<style>
page {
  background: linear-gradient(155deg, #d3ede8 0%, #edf4f5 100%);
}
</style>
<style scoped>
.container {
  padding: 40rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.member-id {
  font-size: 28rpx;
  color: #666;
}

.application-options {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.option-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option-icon {
  font-size: 72rpx;
  margin-bottom: 20rpx;
}

.option-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.option-description {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}
</style>
